Дизайн-система «Мониторинг» · Foundation

Выдача топлива

Спецификация адаптации под тач-планшет. Светлый режим как канон системы, увеличенные тач-таргеты и типографика, продуктовая семантика состояний синка. Глубина строится только на surface-ladder и hairline — без теней, блюра и градиентов (переносимо в React Native).

Android-планшет 10″ Ландшафт 1280×800 Светлая тема Офлайн-первично RN + NativeWind
A.1

Light-токены системы

Светлая лестница построена на inverse-токенах системы и существующих средне-серых инках — без ввода новых оттенков. Лаванда #5e6ad2 остаётся единственным акцентом. Это канон light-темы.

Канва и surface-ладдер
canvas#ffffffкарточки, панели, поля
surface-1#f5f6f6фон страницы
surface-2#f6f7f7приподнятая зона / hover
surface-3#eceef0инсет, иконо-плашки
surface-4#e6e8eaглубокий well (клавиатура)
Ink-шкала и hairline
ink-1#08090aосновной текст, крупные числа
ink-2#62666dвторичный (ink-tertiary)
ink-3#8a8f98метки, плейсхолдеры (ink-subtle)
hairlinergba(8,9,10,.09)бордеры, разделители
hairline-strongrgba(8,9,10,.15)бордеры полей, кнопок
Бренд-акцент — лаванда (без изменений)
primary#5e6ad2CTA, фокус, активные состояния
primary-hover#6872e0наведение
primary-pressed#525dc0нажатие
primary-softrgba(94,106,210,.10)мягкая заливка / выделение
Семантика состояний
success#27a644синхронизировано, получение
queued#b8791aофлайн / в очереди (амбер)
error#d23f34ошибка синхронизации

Лаванда — бренд. Семантика добавлена только как функциональные сигналы синка, сдержанно и в низкой насыщенности.

A.2

Шкала тач-таргетов

Водитель работает на вытянутой руке, часто в перчатках. Один основной акцент на экран. Маркетинговые 40px CTA не применяются.

64
tap-primary — 64pxосновная кнопка действия (CTA), клавиша литров
72
tap-key — 72pxклавиша собственной цифровой клавиатуры
48
tap-secondary — 48pxвторичные кнопки, поля ввода
44
tap-min — 44pxминимум для любого интерактива (карандашик, обновить)
A.3

Продуктовая type-scale

Базовый текст рабочих экранов ≥18px. Ключевые числа — остаток, введённые литры, таймер — на уровне display, читаются на вытянутой руке. Шрифт — Display / Text (Inter как открытая подстановка фирменного гротеска).

--t-display-2xl72 / 800
1 240 л
--t-display-l40 / 700
14 074 л
--t-title28 / 700
Передача топлива
--t-heading22 / 600
Е 482 КН 138
--t-body18 / 500
Базовый текст рабочих экранов — крупный и читаемый.
--t-caption15 / 500
Экскаватор · СМУ Белогорск
--t-label13 / 600 · UPPER
Наёмные организации
A.4

Каталог app-компонентов

Атомы и блоки, из которых собираются все экраны. Имена — каноничные.

big-action-button
Основное действие, ≥64px, лаванда. Один на экран.
Синхронизировано Офлайн · 3 в очереди
sync-pill
3 состояния: синхронизировано / офлайн·N / синхронизация. Рядом — ручной синк.
Остаток АТЗ
8 420л
stat-block
Остаток / введённые литры. Число на уровне display.
М 902 ОР 28Экскаватор · 14:32
320 л
Получение · ТТН №447115:10 · фото загружено
+5 000 л
fuel-row
Запись смены. Выдача (лаванда) и получение (зелёный) визуально различаются.
1
2
3
4
5
6
7
8
9
·
0
⌫
numeric-keypad
Собственная крупная клавиатура для литров и PIN. Клавиши ≥72px.
Наёмные
К 771 ТС 138Бульдозер · ИП Орлов
vehicle-option + org-section-header
Опции сгруппированы: внутренние → наёмные. Госномер крупно, под ним марка + организация.
Добавить фото ТТН
photo-uploader
Камера / галерея / файл. После прикрепления — превью + статус загрузки (ожидает / загружено).
Редактировать запись
edit-sheet
Нижний лист от «карандашика». Изменить литры / ТС или мягко удалить.
12.05.202608:02 — 17:40
Х 214 ТТ 138
ТС9
Выдано4 120 л
shift-card
Прошлая смена: дата, номер АТЗ, время, ТС, литры.
big-action (dual)
Крупная пара «Передача / Получение» рабочего режима, ≥116px.